<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Limbo Verify</title>
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <div id="app">
    <h1>Limbo Verify</h1>

    <hr>

    <h2>Input</h2>

    <div class="flex flex-col gap-3">
      <input class="border" type="text" placeholder="Client Seed" v-model="clientSeed">
      <input class="border" type="text" placeholder="Server Seed" v-model="serverSeed">
      <input class="border" type="number" placeholder="Nonce" v-model="nonceValue">
    </div>

    <h2>Output</h2>
    <h5>Final VerifyHash</h5>
    <pre><code>CryptoJS.sha256(server_seed)</code></pre>
    <input class="border" readonly :value="serverSeedHash ">

    <p class="pt-3"></p>

    <pre><code>CryptoJS.HmacSHA256([client_seed ,nonce].join(":"), server_seed)</code></pre>
    <input class="border" readonly :value="clientNonceHash ">

    <h2>Result</h2>
    <h5>Final VerifyResult</h5>


    <pre><code>CryptoJS.HmacSHA256([client_seed ,nonce].join(":"), server_seed)</code></pre>
    <input class="border" readonly :value="result ">

    <p class="pt-3"></p>

  </div>
</body>

<script type="module">
  import './js/tailwindcss.js';
  import { createApp, ref, watch, onMounted, computed } from './js/vue.js';
  import CryptoJS from './js/crypto-js.js';
  import * as helpers from './js/helpers.js';


  createApp({
    setup() {
      const { c, s, n } = helpers.queryParams;
      const clientSeed = ref(c ?? '');
      const serverSeed = ref(s ?? '');
      const nonceValue = ref(parseInt(n ?? '0'));

      const serverSeedHash = computed(() => CryptoJS.SHA256(CryptoJS.enc.Utf8.parse(serverSeed.value)).toString());
      const clientNonceHash = computed(() => CryptoJS.HmacSHA256([clientSeed.value, nonceValue.value].join(":"), serverSeed.value).toString());

      const result = computed(() => {
        let hash = clientNonceHash.value;
        const nBits = 52;
        hash = hash.slice(0, nBits / 4);
        const r = parseInt(hash, 16);
        let X = r / (2 ** nBits);
        X = 99 / (1 - X);
        const resultNumber = Math.floor(X);
        return Math.max(1, resultNumber / 100);
      });

      return {
        clientSeed,
        serverSeed,
        nonceValue,
        serverSeedHash,
        clientNonceHash,
        result,
      };
    },
  }).mount('#app');
</script>

</html>